<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/stylesheets/example.css"/>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="../bower_components/lodash/lodash.js"></script>
    <script data-require="chance@*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
    <script src="assets/scripts/controllers/issue-798-markerclusterer-perf.js"></script>
</head>
<body ng-app="appMaps">
<div ng-controller="mapCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true"
                        options="map.options">
        <ui-gmap-markers
                models="searchResults.results"
                coords="'coords'"
                idkey="'key'"
                doCluster="true"
                ></ui-gmap-markers>
    </ui-gmap-google-map>
    <button ng-click="addMarkers(1000)">Add New Marker</button>
    <button ng-click="reset()">Reset</button>
    <p>Max number of results to show: 1000<br/>Num of items in results: {{searchResults.results.length}}</p>

    <pre>{{searchResults.results | json}}</pre>
</div>
</body>
</html>
